import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/bean/bean_app_setting.dart';

import '../../../bean/bean_user.dart';
import '../../../common/user_helper.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2021/1/7.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///

///代码清单 13-19
///lib/src/page/custom_bottom_appbar.dart
///首页面底部菜单栏
class CustomBottomAppBar extends StatefulWidget {
  ///菜单点击回调
  final Function(int index) clickCallBack;

  ///小红点提示的索引 用于消息提示
  final int tipsIndex;

  CustomBottomAppBar({this.clickCallBack, this.tipsIndex});

  @override
  _CustomBottomAppBarState createState() => _CustomBottomAppBarState();
}

class _CustomBottomAppBarState extends State<CustomBottomAppBar> {
  //当前显示页面的标签
  int _tabIndex = 0;
  List<Widget> bottomList = [];

  @override
  Widget build(BuildContext context) {
    bool show02 = false;
    AppSettingBean appSettingBean = UserHelper.getInstance.appSettingBean;
    UserBean userBean = UserHelper.getInstance.userBean;
    if (userBean != null) {
      show02 = userBean.isIosCheck == 1;
    }
    List<Widget> bottomList = [];
    if (show02) {
      bottomList = [
        buildBotomItem(
            _tabIndex,
            0,
            "assets/images/2.0x/ion_home_page_blue.png",
            "assets/images/2.0x/ion_home_page_gray.png",
            "首页"),
        buildBotomItem(_tabIndex, 1, "assets/images/2.0x/tong_zhi2.png",
            "assets/images/2.0x/tong_zhi1.png", "通知通告"),
        buildBotomItem(_tabIndex, 3, "assets/images/2.0x/icon_my_blue.png",
            "assets/images/2.0x/icon_my_gray.png", "个人中心"),
      ];
    } else {
      bottomList = [
        buildBotomItem(
            _tabIndex,
            0,
            "assets/images/2.0x/ion_home_page_blue.png",
            "assets/images/2.0x/ion_home_page_gray.png",
            "首页"),
        buildBotomItem(_tabIndex, 1, "assets/images/2.0x/tong_zhi2.png",
            "assets/images/2.0x/tong_zhi1.png", "通知通告"),
        buildBotomItem(
            _tabIndex,
            2,
            "assets/images/2.0x/icon_journalism_blue.png",
            "assets/images/2.0x/icon_journalism_gray.png",
            "积分管理"),
        buildBotomItem(_tabIndex, 3, "assets/images/2.0x/icon_my_blue.png",
            "assets/images/2.0x/icon_my_gray.png", "个人中心"),
      ];
    }
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: bottomList,
    );
  }

  ///代码清单 13-20
  ///lib/src/page/custom_bottom_appbar.dart
  /// _CustomBottomAppBarState 中方法定义 点击事件构建
  /// [selectIndex] 当前选中的页面
  /// [index]每个条目对应的角标
  /// [iconData] 每个条目对就的图标
  /// [title] 每个条目对应的标题
  buildBotomItem(int selectIndex, int index, String selectImage,
      String normalImage, String title) {
    return Expanded(
      //权重适配 1：1 比例
      flex: 1,
      child: new GestureDetector(
        onTap: () {
          if (index != _tabIndex) {
            //更新当前显示
            setState(() {
              _tabIndex = index;
            });
            //回调
            if (widget.clickCallBack != null) {
              widget.clickCallBack(_tabIndex);
            }
          }
        },
        child: SizedBox(
          height: 52,
          child:
              buildPadItem(selectIndex, index, selectImage, normalImage, title),
        ),
      ),
    );
  }

  ///代码清单 13-21
  ///lib/src/page/custom_bottom_appbar.dart
  /// _CustomBottomAppBarState 中方法定义 图标按钮
  buildPadItem(int selectIndex, int index, String selectImage,
      String normalImage, String title) {
    //未选中状态的样式
    TextStyle textStyle = TextStyle(fontSize: 12.0, color: Colors.grey);
    MaterialColor iconColor = Colors.grey;
    double iconSize = 16;
    double padding = 8.0;

    if (selectIndex == index) {
      //选中状态的文字样式
      textStyle = TextStyle(fontSize: 13.0, color: Colors.blue);
      //选中状态的按钮样式
      iconColor = Colors.blue;
    }

    return Container(
      color: Colors.white,
      child: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Column(
              children: <Widget>[
                SizedBox(
                  height: padding,
                ),
                Image.asset(
                  selectIndex == index ? selectImage : normalImage,
                  width: iconSize,
                  height: iconSize,
                  fit: BoxFit.fill,
                ),
                SizedBox(
                  height: 2,
                ),
                Text(
                  title,
                  style: textStyle,
                )
              ],
            ),
            //浮在表面的消息提示
            buildPointTips(widget.tipsIndex == index),
          ],
        ),
      ),
    );
  }

  ///代码清单 13-22
  ///lib/src/page/custom_bottom_appbar.dart
  /// _CustomBottomAppBarState 中方法定义 圆红点
  Widget buildPointTips(bool show) {
    if (!show) {
      return Container();
    }
    return Positioned(
      //右上角对齐
      right: 0,
      top: 6,
      child: Container(
        width: 6,
        height: 6,
        //圆角边框装饰
        decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.all(Radius.circular(7))),
      ),
    );
  }
}
